<script>
import { ref, watch, onMounted } from "vue";
import { message } from "ant-design-vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import axios from "axios";
import MathJax from "../common/MathJax";
import Nav from "@/components/Nav.vue";

export default {
  components: {
    Nav,
    PlusOutlined,
  },
  data() {
    return {
      latex: "",
      latexHtml: "",
    };
  },
  watch: {
    // 监视latex的变化
  },

  methods: {
    navigateTo(destination) {
      this.$router.push({ name: destination });
    },
  },
};
</script>

<template>
  <a-col class="nav-bar menu-container bordered-section" :span="4">
    <div style="height: 30px"></div>
    <h3 class="section-title colortxt">师生云桥</h3>
    <ul class="menu-list">
      <li class="menu-item" @click="navigateTo('home')">题目批改</li>
      <li class="menu-item" @click="navigateTo('about')">错题统计</li>
      <li class="menu-item" @click="navigateTo('learningSituAnalysis')">
        学情分析
      </li>
      <li class="menu-item" @click="navigateTo('settings')">心理健康检测</li>
      <li class="menu-item" @click="navigateTo('communicate')">家校沟通</li>
    </ul>
  </a-col>
</template>

<style scoped>
/* General Styles */
.bordered-section {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 30px;
  color: white;
  padding-bottom: 29px;
  font-family: "Microsoft YaHei UI";
  font-weight: bold;
}

.section-subtitle {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 12px;
  color: #666;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 6px;
}

/* Loading Animation */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  text-align: center;
}

/* Navigation Bar */
.nav-bar {
  height: 100vh;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: #fff;
}

.menu-container {
  text-align: center;
  background-image: url("../assets/bg.png"); /* 确保路径正确 */
  background-size: cover; /* 调整图片大小以覆盖整个背景 */
  background-position: center; /* 居中显示背景图片 */
  background-repeat: no-repeat; /* 防止背景重复 */
  height: 1800px;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 30px;
  font-family: "Microsoft YaHei UI";
  font-weight: bold;
}

.menu-item {
  padding: 10px 0;
  cursor: pointer;
  color: #fff;
  transition: background-color 0.3s;
  margin: 5px 0;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Main Content */
.main-container {
  background-color: #f7f7f3;
  padding: 20px;
}

.uploaded-image img {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 8px;
}

.response-message {
  white-space: pre-wrap;
  word-break: break-word;
}

.response-message p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

.section-title-h3 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 16px;
  color: black;
  padding-bottom: 8px;
}

.colortxt {
  font-size: 45px;
  background: linear-gradient(to right, white, pink);
  -webkit-background-clip: text;
  color: transparent;
}
</style>
